<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in list" :key="item.id"
        ><img :src="item.coverImage | imgUrl" alt="item.name"
      /></van-swipe-item>
    </van-swipe>
    <!-- 商品分类 -->
    <van-grid column-num="3">
      <van-grid-item
        v-for="item in goodsType"
        :icon="item.coverImage | imgUrl"
        :text="item.name"
        :key="item.id"
        @click="toList(item.id, item.name)"
      />
    </van-grid>
    <van-divider>热卖</van-divider>
    <van-card
      v-for="(item, index) in goods"
      :tag="index + 1 + ''"
      :key="item.id"
      :num="item.amount"
      :price="item.price.toFixed(2)"
      :desc="item.desc"
      :title="item.name"
      :thumb="item.coverImage | imgUrl"
      @click="toDetail(item.id)"
    >
      <template #footer>
        <van-button size="mini">按钮</van-button>
        <van-button size="mini">按钮</van-button>
      </template>
    </van-card>
  </div>
</template>

<script>
// @ is an alias to /src
import { loadBanner } from "../services/banner";
import { loadGoodsType, loadGoods } from "../services/goods";
export default {
  name: "Home",
  methods: {
    toDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id,
          name,
        },
      });
    },
    toList(id, name) {
      this.$router.push({
        name: "List",
        query: {
          id,
          name,
        },
      });
    },
  },
  components: {},
  data() {
    return {
      list: [],
      goodsType: [],
      goods: [],
    };
  },
  created() {
    loadBanner().then((res) => this.list.push(...res.data));
    loadGoodsType().then((res) => this.goodsType.push(...res.data));
    loadGoods().then((res) => this.goods.push(...res.data));
  },
};
</script>

<style lang="scss" scoped>
.my-swipe img {
  width: 100vw;
  height: 60vw;
}
</style>
